<template>
  <div>
    <h1>reactive</h1>
    <h2>{{ obj }}</h2>
    <button @click="changeAge">改变年龄</button>
  </div>
</template>
<script>
/**
 * 1. 从vue中导入reactive函数
 * 2. 如何把一个对象变成reactive ，直接调用reactive(对象) 把对象传入返回值就是个响应式对象
 * 3. 把这个响应式对象在setup中返回
 * 
 * 注意 reactive是把对象转成响应式数据，不能转简单数据类型
 */
import { reactive } from 'vue';
export default {
  setup() {
    // reactive()
    const obj = reactive({name: 'zs', age: 18})
    const changeAge = () => {
      obj.age++
      console.log(obj);
    }
    return {
      obj,
      changeAge
    }
  }
}
</script>


